<template>
  <div class="custom-alarm">
    <div class="alarm-search">
      <el-form :inline="true" :model="queryParams">
        <el-form-item label="告警设备类型">
          <el-select v-model="queryParams.eqptTypeId" clearable filterable placeholder="请选择告警设备类型" size="small">
            <el-option v-for="item in eqptTypeList" :key="item.typeId" :label="item.typeName" :value="item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="告警名称">
          <el-input v-model="queryParams.alarmPlanName" placeholder="请输入告警名称" size="small"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch" size="small">查询</el-button>
          <el-button v-if="checkAuthority('/alarmPlan/add')" type="primary" @click="handleAdd" size="small">新增自定义告警</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="alarm-table">
      <el-table :data="tableData" center>
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ pageSize * (pageNum - 1) + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="alarmPlanNo" label="告警编号" />
        <el-table-column prop="eqptTypeName" label="告警设备类型" />
        <el-table-column prop="alarmPlanName" label="告警名称" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="checkAuthority('/select')"
              @click.native.prevent="infoSeeing(scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              v-if="checkAuthority('/alarmPlan/update')"
              @click.native.prevent="infoEdit(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
            <el-button
              v-if="checkAuthority('/alarmPlan/delete')"
              @click.native.prevent="infoDel(scope.row)"
              type="text"
              size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="pageNum"
        :total="total"
      />
    </div>
    <custom-alarm-modal v-if="modalObj.isShow" :alarmObj="alarmObj" :eqptTypeList="eqptTypeList" @close="handleClose" @ok="handleSave"/>
  </div>
</template>
<script>
import CustomAlarmModal from './CustomAlarmModal'
import {
  queryAlarmPlanByPage,
  getEqptTypeList,
  queryAlarmPlanDetail,
  deleteAlarmPlan,
  addAlarmPlan,
  updateAlarmPlan
} from '../js/alarmStrategy'
import { checkAuthority } from '@/utils/btnPermission' // 页面按钮权限

export default {
  name: 'CustomAlarm',
  components: { CustomAlarmModal },
  provide () {
    return {
      shareData: this.modalObj
    }
  },
  data () {
    return {
      queryParams: {
        eqptTypeId: null,
        alarmPlanName: null
      },
      pageSize: 10,
      pageNum: 1,
      total: 0,
      tableData: [],
      modalObj: {
        isShow: false,
        title: null,
        isDisable: false
      },
      alarmObj: {
        alarmPlanDetailList: []
      },
      eqptTypeList: []
    }
  },
  computed: {},
  watch: {},
  methods: {
    checkAuthority,
    handleSearch () {
      this.pageNum = 1
      this.getTableData()
    },
    async handleSave (data) {
      try {
        if (this.modalObj.title === '新增自定义告警') {
          // 新增自定义告警
          const res = await addAlarmPlan(data)
          if (res.code === 0) {
            this.$message.success('新增自定义告警成功！')
            this.handleClose()
            this.handleSearch()
          }
        } else if (this.modalObj.title === '编辑自定义告警') {
          // 编辑自定义告警
          const res = await updateAlarmPlan(data)
          if (res.code === 0) {
            this.$message.success('修改自定义告警成功！')
            this.handleClose()
            this.getTableData()
          }
        }
      } catch (e) {}
    },
    handleAdd () {
      // 新增自定义告警
      this.modalObj.isShow = true
      this.modalObj.title = '新增自定义告警'
      this.alarmObj.alarmPlanDetailList = []
    },
    handleClose (val) {
      // 关闭modal
      this.modalObj.isShow = val
      this.modalObj.isDisable = false
      this.alarmObj.alarmPlanDetailList = []
    },
    infoSeeing (row) {
      // 查看
      this.modalObj.isShow = true
      this.modalObj.isDisable = true
      this.modalObj.title = '查看自定义告警'
      const { id, alarmPlanName, eqptTypeId } = row
      this.queryAlarmPlanDetail(id, alarmPlanName, eqptTypeId)
    },
    infoEdit (row) {
      // 编辑
      this.modalObj.isShow = true
      this.modalObj.title = '编辑自定义告警'
      const { id, alarmPlanName, eqptTypeId } = row
      this.queryAlarmPlanDetail(id, alarmPlanName, eqptTypeId)
    },
    infoDel (row) {
      // 删除
      const { id } = row
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await deleteAlarmPlan(id)
          if (res.code === 0) {
            this.$message.success('删除成功！')
            this.getTableData()
          }
        } catch (e) {}
      }).catch(() => {})
    },
    async getTableData () {
      // 查询告警策略
      try {
        const res = await queryAlarmPlanByPage({
          ...this.queryParams,
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
        if (res.code === 0) {
          this.tableData = res.data.records
          this.total = res.data.total
        }
      } catch (e) {}
    },
    async queryAlarmPlanDetail (alarmPlanId, alarmPlanName, eqptTypeId) {
      // 查询告警策略详情
      try {
        const res = await queryAlarmPlanDetail({
          alarmPlanId,
          alarmPlanName,
          eqptTypeId,
          pageNum: 1,
          pageSize: 10
        })
        if (res.code === 0) {
          this.alarmObj = res.data
        }
      } catch (e) {}
    },
    pageHandleChange (page) {
      this.pageNum = page
      this.getTableData()
    },
    async getEqptTypeList () {
      try {
        const res = await getEqptTypeList({})
        if (res.code === 0) {
          this.eqptTypeList = res.data
        }
      } catch (e) {}
    }
  },
  mounted () {
    this.handleSearch()
    this.getEqptTypeList()
  }
}
</script>
<style lang="scss" scoped>
.custom-alarm {
  .alarm-table {
    .el-pagination {
      text-align: center;
      display: block;
      margin: 10px auto;
    }
  }
}
</style>
